<!DOCTYPE html>
<!-- <html class="dark"> -->
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./output.css" rel="stylesheet" />
</head>

<body class="">
  <div class="m-auto max-w-5xl">
    <!-- <div>
      <div class="text-center font-semibold py-5">排版</div>
      <div class="space-x-10">
        Font Family:
        <span class="font-sans">font-sans</span>
        <span class="font-serif">font-serif</span>
        <span class="font-mono">font-mono</span>
      </div>
      <div class="space-x-10">
        Font Size:
        <span class="text-xs">text-xs</span>
        <span class="text-sm">text-sm</span>
        <span class="text-base">text-base</span>
      </div>
      <div class="space-x-10">
        Font Weight:
        <span class="font-normal">font-normal</span>
        <span class="font-medium">font-medium</span>
        <span class="font-semibold">font-semibold</span>
      </div>
    </div> -->
    <!-- <div class="w-full">
      <div class="text-center font-semibold py-5">响应式</div>
      <div class="flex lg:flex-row flex-col">
        <img class="max-w-full lg:w-1/2" src="https://img3.dian.so/lhc/2023/10/07/3456w_1296h_46AF41696664263.jpg" />
        <img class="max-w-full lg:w-1/2" src="https://img3.dian.so/lhc/2023/10/07/3456w_1296h_EA0AD1696659398.jpg" />
      </div>
      <div
        class="grid grid-cols-3 gap-x-6 gap-y-10 max-sm:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 xl:gap-x-8 pb-7">
        <a id='M6' class="aspect-h-1 aspect-w-1 w-full overflow-hidden xl:aspect-h-8 xl:aspect-w-7">
          <Image class="h-auto w-full" src='https://img3.dian.so/lhc/2023/10/08/880w_1344h_7B81B1696729538.jpg' />
        </a>
        <a id='M12' class="aspect-h-1 aspect-w-1 w-full overflow-hidden xl:aspect-h-8 xl:aspect-w-7">
          <Image class="h-auto w-full" src='https://img3.dian.so/lhc/2023/10/08/880w_1344h_06CB51696729565.jpg' />
        </a>
        <a id='M30' class="aspect-h-1 aspect-w-1 w-full overflow-hidden xl:aspect-h-8 xl:aspect-w-7">
          <Image class="h-auto w-full" src='https://img3.dian.so/lhc/2023/10/08/880w_1344h_DA7E41696729652.jpg' />
          <div>
          </div>
        </a>
      </div>
    </div> -->
    <!-- <div>
      <div class="text-center font-semibold py-5">Dark Mode</div>
      <div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
        <div>
          <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" aria-hidden="true">
            </svg>
          </span>
        </div>
        <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
        <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
          The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer
          space.
        </p>
      </div>
    </div> -->

    <div
      class="h-60 bg-cover bg-no-repeat bg-[url(https://img3.dian.so/lhc/2023/10/09/1170w_1806h_11C531696821195.jpg)]">
      <div></div>
      <div class="h-10 pt-44 bg-[#bada55] text-[22px] before:content-['Festivus']">
        自定义样式
      </div>
      <!-- <div class="btn-primary">
        btn-primary
      </div> -->
    </div>
  </div>
</body>
<script>
  // if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  //   document.documentElement.classList.add('dark')
  // } else {
  //   document.documentElement.classList.remove('dark')
  // }

  // // Whenever the user explicitly chooses light mode
  // localStorage.theme = 'light'

  // // Whenever the user explicitly chooses dark mode
  // localStorage.theme = 'dark'

  // // Whenever the user explicitly chooses to respect the OS preference
  // localStorage.removeItem('theme')
</script>

</html>